<template>
    <ul>
        <li v-for="product in products" :key="product.id">
            {{product.title}} - {{product.price| currency}} -{{product.inventory}}
            <br>
            <el-button :disabled="!product.inventory" @click="addProductToCart(product)">Add to cart</el-button>
        </li>
    </ul>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
    computed: mapState({
        products: state => state.products.all
    }),
    methods: mapActions('cart',[
        'addProductToCart'
    ]),
    created(){
        this.$store.dispatch('products/getAllProducts')
    }
}
</script>

